<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../plugins/layui/css/layui.css" />
		<script src="../plugins/layui/layui.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		
		<table class="layui-hide" id="test" lay-filter="test"></table>
		<!-- 头部工具栏  -->
		<script type="text/html" id="toolbarDemo">
		  	<div class="layui-btn-group">
			  <button class="layui-btn layui-btn-sm">
			    <i class="layui-icon">&#xe654;</i>
			  </button>
			  <button class="layui-btn layui-btn-sm">
			    <i class="layui-icon">&#xe642;</i>
			  </button>
			  <button class="layui-btn layui-btn-sm">
			    <i class="layui-icon">&#xe640;</i>
			  </button>
			</div>
		</script>
		<!-- 右部操作  -->
		<script type="text/html" id="barDemo">
		  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
		</script>
		
		<script>
			layui.use('table', function() {
				var table = layui.table;
				var lay = layui.layer;

				table.render({
					elem: '#test',
					width:700,
					url: '../dataset/refund.json',
					toolbar:'#toolbarDemo',
					cols: [
						[{
							type:'checkbox'
						},
						{
							field: 'id',
							width: 80,
							title: '订单号',
							sort: true
						}, {
							field: 'message',
							width: 150,
							title: '物品信息'
						}, {
							field: 'applyTime',
							width: 102,
							title: '申请时间',
							sort: true
						}, {
							field: 'refundTime',
							width: 102,
							title: '退款时间',
							sort: true
						}, {
							field: 'payee',
							title: '收款人',
							width: 80,
							minWidth: 30
						}, {
							field: 'money',
							width: 80,
							title: '金额'
						}, {
							field: 'operation',
							width: 80,
							title: '操作',
							toolbar: '#barDemo',
						}]
					],
					page: true
				});
				
				//监听工具条
				table.on('tool(test)', function(obj){
				   	if(obj.event === 'delete'){
					    lay.confirm('真的删除行么', function(index){
					        obj.del();
					        lay.close(index);
					    });
				    } 
				});
				
			});
		</script>	
			
		
	</body>
</html>
